<template>
    <div class="main">
        <div class="goods_list">
            <div class="item">
                <img src="//m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg" alt="">
                <span>京东超市</span>
            </div>
            <div class="item">
                <img src="//m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png" alt="">
                <span>数码电器</span>
            </div>
            <div class="item">
                <img src="//m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png" alt="">
                <span>京东新百货</span>
            </div>
            <div class="item">
                <img src="//m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png" alt="">
                <span>京东生鲜</span>
            </div>
            <div class="item">
                <img src="//m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png" alt="">
                <span>京东到家</span>
            </div>
            <div class="item">
                <img src="//m15.360buyimg.com/mobilecms/jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png" alt="">
                <span>充值缴费</span>
            </div>
            <div class="item">
                <img src="//m15.360buyimg.com/mobilecms/jfs/t1/34248/39/16616/4689/62bbbdccE9f11132e/d51caf15f2f412b2.png" alt="">
                <span>附近好店</span>
            </div>
            <div class="item">
                <img src="//m15.360buyimg.com/mobilecms/jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png" alt="">
                <span>领券</span>
            </div>
            <div class="item">
                <img src="//m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png" alt="">
                <span>PLUS会员</span>
            </div>
            <div class="item">
                <img src="//m15.360buyimg.com/mobilecms/jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png" alt="">
                <span>京东国际</span>
            </div>
        </div>
        <ul>
            <li class="li1"></li>
            <li></li>
        </ul>
    </div>
</template>

<script>
export default{
    name:'Main',
    data(){
        return{
            msg:'这是中间！',
        };
    },
};
</script>

<style lang="scss" scoped>
    .main{
        width: 700px;
        height: 300px;
        // background-color: rgb(6, 7, 7);
        margin: 20px auto;
        font-size: 28px;
        .goods_list{
            display: flex;
            flex-wrap: wrap;
            .item{
                display: flex;
                width: 20%;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-top: 25px;
                img{
                width: 60px;
                }
            }
        }
        ul{
            width: 50px;
            height: 20px;
            // background-color: red;
            position: relative;
            left: 325px;
            display: flex;
            justify-content: space-around;
            margin-top: 12px;
            li{
                width: 15px;
                height: 15px;
                background-color: #CCCCCC;
                border-radius: 50%;
            }
            .li1{
                background-color: #FA2C19;
            }
        }
    }
</style> 